<template>
  <div class="app-container home">
    <div class="refresh">
      <el-tooltip class="item" effect="dark" content="刷新数据" placement="top">
        <el-button  circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
    </div>

    <panel-group :cardList="cardList"/>

    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :lg="16">
        <div class="chart-wrapper" v-loading="loadings.getTop10">
          <div class="chart-title">事项点击次数TOP10</div>
          <bar-chart v-show="!empty.top10IsEmpty" :chartData="clickServiceTopData" height="440px"/>
          <DataIsEmpty v-show="empty.top10IsEmpty" height="440px"/>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8" >
        <div class="chart-wrapper" v-loading="loadings.getTop10Percent">
          <div class="chart-title">事项点击TOP10占比情况</div>
          <pie-chart v-show="!empty.top10PercentIsEmpty" :chartData="clickServiceTopPercent" height="440px"/>
          <DataIsEmpty v-show="empty.top10PercentIsEmpty" height="440px"/>
        </div>
      </el-col>

      <el-col :span="24">
        <div class="chart-wrapper mb0" v-loading="loadings.getNear30faultLog">
          <div class="chart-title">近30天异常上报数量趋势图</div>
          <line-chart v-show="!empty.near30faultLogIsempty" :chart-data="nearFaultList" height="330px"/>
          <DataIsEmpty v-show="empty.near30faultLogIsempty" height="330px"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import DataIsEmpty from './components/DataIsEmpty'
import {
  getServiceNum,
  getBranchNum,
  getDevNum,
  getModuleNum,
  getSubjectNum,
  getUseDevNum,
  getTop10,
  getNear30faultLog,
  getTop10Percent
} from "@/api/home";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart,
    DataIsEmpty
  },
  data() {
    return {
      cardList: [
        {
          name: '已启用事项总数',
          value: 0,
          icon: 'matter1',
          routerName:'Service',
        },
        {
          name: '主题总数',
          value: 0,
          icon: 'subject1',
          routerName:'Subject'
        },
        {
          name: '网点总数',
          value: 0,
          icon: 'net',
          routerName:'Branch'
        },
        {
          name: '已部署设备总数',
          value: 0,
          icon: 'guide',
          routerName:'PlaceManager'
        },
        {
          name: '设备总数',
          value: 0,
          icon: 'zizhu',
          routerName:'DeviceInfo'
        },
        {
          name: '模块总数',
          value: 0,
          icon: 'model1',
          routerName:'DeviceModule'
        },
      ],
      nearFaultList: [],
      clickServiceTopData: [],
      clickServiceTopPercent:[],
      loadings:{
        getTop10: false,
        getTop10Percent: false,
        getNear30faultLog: false,
      },
      empty:{
        top10IsEmpty: false,
        top10PercentIsEmpty: false,
        near30faultLogIsempty:false
      }
    }
  },
  created() {
    // 获取数据
    this.initGetData();
  },
  methods: {
    refresh(){
      this.initGetData();
    },
    // 初始化获取数据
    initGetData(){
      // 根据卡片的排列排序对应接口请求数组 （如果修改卡片位置，这里需要对应修改）
      const cardRequestArray = [
        getServiceNum(), // 已启用事项总数
        getSubjectNum(),  // 主题总数
        getBranchNum(),  // 网点总数
        getUseDevNum(),  // 已部署设备总数
        getDevNum(),  // 设备总数
        getModuleNum()  // 模块总数
      ];
      // 获取卡片数据
      Promise.allSettled(cardRequestArray).then((results) => {
        return results.forEach((itemResult, index) => {
          if (itemResult.status === 'fulfilled') {
            const num = itemResult.value.data || 0;
            // 根据顺序给卡片数量赋值
            this.cardList[index].value = num;
          }
        })
      })
      // 获取事项点击top10
      this.getTop10();
      // 获取事项点击百分比
      this.getTop10Percent();
      // 获取近30天故障数据
      this.getNear30faultLog();
    },
    // 获取点击事项Top10
    getTop10() {
      this.loadings.getTop10 = true;
      this.empty.top10IsEmpty = false;

      getTop10().then(res => {
        this.loadings.getTop10 = false;
        this.empty.top10IsEmpty = !res.data.length;
        this.clickServiceTopData = res.data;
      });
    },
    // 获取近30天故障上上报数量
    getNear30faultLog() {
      this.loadings.getNear30faultLog = true;
      this.empty.near30faultLogIsempty = false;

      getNear30faultLog().then(res => {
        this.empty.near30faultLogIsempty = !res.data.length;
        this.loadings.getNear30faultLog = false;
        this.nearFaultList = res.data;
      });
    },
    getTop10Percent(){
      this.loadings.getTop10Percent = true;
      this.empty.top10PercentIsEmpty = false;

      getTop10Percent().then(res => {
        this.empty.top10PercentIsEmpty = !res.data.length;

        this.loadings.getTop10Percent = false;
        this.clickServiceTopPercent = res.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 10px 30px 30px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    position: relative;
    width: 100%;
    padding: 15px;
    margin-bottom: 30px;
    background: #fff;

    .chart-title{
      font-size: 20px;
      line-height: 50px;
      font-weight: bold;
      text-align: center;
      font-family: 微软雅黑;
      color: #666;
    }

    .empty-box{
      width: 100%;
      height: 100%;
      background: skyblue;
    }
  }

  .mb0{
    margin-bottom: 0;
  }

  .refresh{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}
</style>
